<template>
  <div style="margin-top:20px">
    <el-checkbox :indeterminate="isIndeterminate"
                 v-model="checkAll"
                 @change="handleCheckAllChange">{{father.classify}}</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedArr"
                       style="margin-left:30px"
                       @change="handleCheckedCitiesChange">
      <el-checkbox v-for="item in checkArr"
                   :label="item"
                   :key="item">{{item}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  props: {
    father: Object
  },
  data () {
    return {
      checkAll: false,
      checkedArr: [],
      checkArr: null,
      isIndeterminate: true
    }
  },
  methods: {
    handleCheckAllChange (val) {
      this.checkedArr = val ? this.checkArr : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.checkArr.length;
      console.log(checkedCount, this.checkArr.length);
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkArr.length;
    }
  },
  watch: {
    father: {
      handler (newVal) {
        this.checkArr = newVal.Array
      },
      deep: true,
      immediate: true
    }
  },
}
</script>

<style>
</style>